/**
*数据字典
*/
<template>
     <vp-main-page @refresh="loadData">
        <template #actions>
            <vp-btn-confirm v-auth="'systemThreshold.submit'" @click="handleSubmit"/>
		</template>
        <template #table>
            <el-form label-suffix=":"  :model="formData"  ref="formRef" :rules="formRules" label-width="120px">
                <vp-table :data="formData.tableData" stripe border  style="width: 100%" row-key="id" :height="`calc(100vh - 156px - 16px)`" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                    <el-table-column  type="index" align="center" label="#">
                    </el-table-column>
                    <el-table-column :label="$t('systemThreshold.name')" 
                        prop="name"
                        show-overflow-tooltip
                    >
                    <template #header><vp-label zh="项目" en="Item"/></template>
                    </el-table-column>
                    <el-table-column :label="$t('systemThreshold.v1')" width="250"
                        show-overflow-tooltip
                    >
                        <template #header><vp-label zh="值1" en="Value1"/></template>
                        <template #default="{$index}">
                            <el-form-item :prop="`tableData[${$index}].yjtsJb1`" :rules="formRules.yjtsJb1" label-width="auto">
                                <el-input v-model="formData.tableData[$index].yjtsJb1" v-trim maxlength="5">
                                    <template #prepend>
                                        <span>&lt; =</span>
                                    </template>
                                    <template #append>
                                        <span style="color: var(--el-color-danger)">警告</span>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('systemThreshold.v2')" width="250"
                        show-overflow-tooltip
                    >
                        <template #header><vp-label zh="值2" en="Value2"/></template>
                        <template #default="{$index}">
                            <el-form-item :prop="`tableData[${$index}].yjtsJb2`" :rules="formRules.yjtsJb2" label-width="auto">
                                <el-input v-model="formData.tableData[$index].yjtsJb2" maxlength="5">
                                    <template #prepend>
                                        <span>&lt; =</span>
                                    </template>
                                    <template #append>
                                        <span style="color: var(--el-color-warning)">预警</span>
                                    </template>
                                </el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('systemThreshold.v3')" width="250"
                        show-overflow-tooltip
                    >
                    <template #header><vp-label zh="值3" en="Value3"/></template>
                    </el-table-column>
                </vp-table>
            </el-form>
        </template>
	</vp-main-page>
</template>
<script setup lang="ts" name="systemThreshold">
import { defineComponent, nextTick, onMounted, reactive, ref, toRefs } from 'vue'
import request from '/@/utils/request'
import validateUtils from '/@/utils/validateUtils';
import { ElMessage } from 'element-plus';

    const loading = ref(false);
    const saveLoading = ref(false);
    const formData = ref({} as any);

    const formRules = {
        yjtsJb1:[
            validateUtils.integer,
            validateUtils.notNull,
        ],
        yjtsJb2:[
            validateUtils.integer,
            validateUtils.notNull,
        ]
    }

    const types = [
        {
            key: "QUALITY_POST_AUTH",
            name: "岗位授权有效期",
        },
        {
            key: "TRAINING_RETRAINING_MONITORING",
            name: "复训监控",
        },
    ];

    const loadData = () => {
        loading.value = true;
            request.get("/system/threshold/list").then(res => {
            const data = res?.data || [];
            formData.value.tableData = types.map((value) => {
                for (let i = 0; i < data.length; i++) {
                    if (data[i].key === value.key) {
                        return {
                            ...value,
                            ...data[i],
                        };
                    }
                }
                return {
                    ...value
                };
            });
        }).finally(() => {
            loading.value = false;
        });
    };
    onMounted(() => {
        loadData();
    });

    const formRef = ref();
    const handleSubmit = () => {
        saveLoading.value=true;
        formRef.value.validate((valid: boolean)=>{
            if(valid){
                request.post('/system/threshold', formData.value.tableData).then(()=>{
                    ElMessage.success("操作成功/Success.");
                }).finally(()=> saveLoading.value=false);
            }else{
                saveLoading.value=false;
            }
        })
    };

</script>
